<template>
  <view class="ai-tutor">
    <Navbar
      title="AI导师"
      bgColor="#f48c42"
      :hideBtn="false"
      :h5Show="true"
      titleStyle="color: #ffffff; font-weight: 500;"
    ></Navbar>

    <view class="chat-container">
      <view class="message-list">
        <view
          v-for="(item, index) in chatHistory"
          :key="index"
          :class="['message-item', item.type === 'user' ? 'user-msg' : 'ai-msg']"
        >
          <view class="avatar">
            <image
              :src="
                item.type === 'user' ? '/static/img/stu-avatar.png' : '/static/img/ai.png'
              "
              mode="aspectFill"
            />
          </view>
          <view class="message-content">
            <view class="light">
              <f-md :content="item.content" :isStreaming="item.status !== 1"></f-md>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="input-area">
      <view v-if="!isVip" class="chat-info">
        <text class="free-chat-count">
          今日剩余{{ freeChatNum }}次
          <text class="reset-time">({{ resetTimeText }})</text>
        </text>
      </view>

      <view class="input-wrapper">
        <view class="input-container">
          <u-input
            v-model="message"
            placeholder="请输入您的问题"
            border="surround"
            :clearable="true"
          ></u-input>
          <view class="button-group">
            <u-button
              @click="sendMessage"
              type="primary"
              size="mini"
              :disabled="!message.trim()"
              >发送</u-button
            >
            <u-button
              v-if="questionId"
              @click="showTemplates"
              type="info"
              size="mini"
              icon="plus"
              class="template-btn"
            ></u-button>
          </view>
        </view>
      </view>
    </view>

    <view class="debug-info" style="display: none">
      <text>VIP状态: {{ isVip }}</text>
      <text>弹窗状态: {{ showVipPopup }}</text>
    </view>

    <vip-popup :show.sync="showVipPopup" @open="onPopupOpen" @close="onPopupClose" />
  </view>
</template>

<script>
import fMd from "../../components/f-md/f-md.vue";
import Navbar from "@/components/navbar/Navbar";
import { mapState } from "vuex";
import VipPopup from "@/components/vip-popup/index.vue";
import * as userApi from "@/api/user.js";
import * as aiApi from "@/api/ai.js";

export default {
  components: {
    VipPopup,
    fMd,
    Navbar,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  data() {
    return {
      message: "",
      chatHistory: [
        {
          type: "ai",
          content: "你好，我是你的AI导师，有什么我可以帮你的吗？",
          status: 1,
        },
      ],
      scrollTop: 0,
      isVip: false,
      showVipPopup: false,
      freeChatNum: 0,
      resetTimeText: "",
      scrollAnimationDuration: 100,
      isScrolling: false,
      templates: ["请解释一下这个题目"],
      showTemplatePopup: false,
      questionId: "",
    };
  },
  async onShow() {
    await this.getUserInfo();
    this.updateResetTime();
    this.resetTimeInterval = setInterval(() => {
      this.updateResetTime();
    }, 60000);
  },
  onLoad(options) {
    this.questionId = options.questionId || "";
  },
  methods: {
    async getUserInfo() {
      try {
        const res = await userApi.getInfo();
        if (res.code === 200) {
          this.$store.commit("user/SET_USER_INFO", res.data);
          this.freeChatNum = res.data.freeChatNum || 0;
          const now = new Date().getTime();
          this.isVip = res.data.vipValid
            ? new Date(res.data.vipValid).getTime() > now
            : false;
        } else {
          throw new Error(res.message || "获取用户信息失败");
        }
      } catch (error) {
        console.error("获取用户信息失败:", error);
        uni.showToast({
          title: error.message || "获取用户信息失败",
          icon: "none",
        });
      }
    },
    async checkVipStatus() {
      try {
        if (!this.isVip) {
          setTimeout(() => {
            this.showVipPopup = true;
          }, 100);
        }
      } catch (error) {
        console.error("VIP状态检查失败:", error);
        uni.showToast({
          title: "系统错误，请稍后再试",
          icon: "none",
        });
      }
    },
    handleBuyVip() {
      uni.showToast({
        title: "正在开发中...",
        icon: "none",
      });
      this.showVipPopup = false;
    },
    async sendMessage() {
      if (!this.isVip && this.freeChatNum <= 0) {
        setTimeout(() => {
          this.showVipPopup = true;
        }, 100);
        return;
      }

      if (!this.message.trim()) return;

      // 添加用户消息
      this.chatHistory.push({
        type: "user",
        content: this.message,
        status: 1,
      });

      // 添加一个空的 AI 消息占位
      this.chatHistory.push({
        type: "ai",
        content: "",
      });

      this.scrollToBottom();

      try {
        const userMessage = this.message.trim();
        this.message = "";

        await aiApi.chat(userMessage, (newText) => {
          const lastMessage = this.chatHistory[this.chatHistory.length - 1];
          if (newText === "<|stop|>") {
            this.$set(lastMessage, "status", 1);
            this.$nextTick(() => {
              setTimeout(() => {
                this.isScrolling = false;
                this.scrollToBottom();
              }, 200);
            });
          } else {
            lastMessage.content += newText;
            if (!this.isScrolling) {
              this.scrollToBottom();
            }
          }
        });

        if (!this.isVip && this.freeChatNum > 0) {
          this.freeChatNum--;
        }
      } catch (error) {
        console.error("AI回复失败:", error);
        // 移除失败的 AI 消息
        this.chatHistory.pop();
        // 移除用户消息
        this.chatHistory.pop();

        uni.showToast({
          title: error.message || "获取回复失败，请重试",
          icon: "none",
        });
      }
    },
    scrollToBottom() {
      if (this.isScrolling) return;
      this.isScrolling = true;

      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select(".message-list")
          .boundingClientRect((data) => {
            uni.pageScrollTo({
              scrollTop: data.height + 2000,
              duration: 100,
              complete: () => {
                setTimeout(() => {
                  this.isScrolling = false;
                }, 150);
              },
            });
          })
          .exec();
      });
    },
    onPopupOpen() {
      console.log("弹窗打开");
    },
    onPopupClose() {
      console.log("弹窗关闭");
    },
    updateResetTime() {
      const now = new Date();
      const tomorrow = new Date(now);
      tomorrow.setDate(tomorrow.getDate() + 1);
      tomorrow.setHours(0, 0, 0, 0);

      const hours = Math.floor((tomorrow - now) / (1000 * 60 * 60));
      const minutes = Math.floor(((tomorrow - now) % (1000 * 60 * 60)) / (1000 * 60));

      this.resetTimeText = `${hours}小时${minutes}分钟后重置`;
    },
    showTemplates() {
      uni.showActionSheet({
        itemList: this.templates,
        success: (res) => {
          const selectedTemplate = this.templates[res.tapIndex];
          this.chatHistory.push({
            type: "user",
            content: selectedTemplate,
          });

          this.chatHistory.push({
            type: "ai",
            content: "",
          });

          this.scrollToBottom();

          // 构建请求参数
          const params = this.questionId
            ? { questionId: this.questionId, type: "aq" }
            : {};

          aiApi
            .chat(
              selectedTemplate,
              (newText) => {
                const lastMessage = this.chatHistory[this.chatHistory.length - 1];
                if (newText === "<|stop|>") {
                  this.$set(lastMessage, "status", 1);
                  this.$nextTick(() => {
                    setTimeout(() => {
                      this.isScrolling = false;
                      this.scrollToBottom();
                    }, 200);
                  });
                } else {
                  lastMessage.content += newText;
                  if (!this.isScrolling) {
                    this.scrollToBottom();
                  }
                }
              },
              params
            ) // 传入参数
            .catch((error) => {
              console.error("AI回复失败:", error);
              this.chatHistory.pop();
              this.chatHistory.pop();

              uni.showToast({
                title: error.message || "获取回复失败，请重试",
                icon: "none",
              });
            });

          if (!this.isVip && this.freeChatNum > 0) {
            this.freeChatNum--;
          }
        },
      });
    },
  },
  onHide() {
    if (this.resetTimeInterval) {
      clearInterval(this.resetTimeInterval);
    }
  },
  onUnload() {
    if (this.resetTimeInterval) {
      clearInterval(this.resetTimeInterval);
    }
  },
};
</script>

<style lang="scss">
.ai-tutor {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;

  .chat-container {
    flex: 1;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;

    .message-list {
      padding-bottom: 120rpx;
    }

    .message-item {
      margin-bottom: 20rpx;
      padding: 10rpx;
      display: flex;
      align-items: flex-start;

      .avatar {
        width: 80rpx;
        height: 80rpx;
        flex-shrink: 0;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .message-content {
        margin: 0 20rpx;
        display: inline-block;
        padding: 16rpx 24rpx;
        border-radius: 8rpx;
        max-width: calc(80% - 120rpx);
        word-break: break-all;
      }
    }

    .user-msg {
      flex-direction: row-reverse;

      .message-content {
        background-color: #4ecdb6;
        color: #ffffff;
      }
    }

    .ai-msg {
      flex-direction: row;

      .message-content {
        background-color: #ffffff;
        color: #333333;
      }
    }
  }

  .input-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    padding: 20rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

    .chat-info {
      padding-bottom: 10rpx;

      .free-chat-count {
        font-size: 24rpx;
        color: #666;

        .reset-time {
          color: #999;
          margin-left: 4rpx;
        }
      }
    }

    .input-wrapper {
      .input-container {
        display: flex;
        align-items: center;
        gap: 10rpx;

        :deep(.u-input) {
          flex: 1;
          min-height: 80rpx;

          &__content {
            min-height: 80rpx;
            padding: 0 20rpx;
          }

          &__input {
            height: 80rpx;
            font-size: 28rpx;
          }
        }

        .button-group {
          display: flex;
          align-items: center;
          gap: 10rpx;

          .u-button {
            height: 64rpx;
          }

          .template-btn {
            padding: 0;
            width: 64rpx;
          }
        }
      }
    }
  }
}
</style>
